<template>
    <div>
        <el-form label-position="left" label-width="100px" v-model="visualMapC">
            <el-form-item label="显示">
              <el-radio v-model="visualMapC.show" :label="true">是</el-radio>
              <el-radio v-model="visualMapC.show" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item  label="方向">
               <el-select v-model="visualMapC.orient" placeholder="horizontal" size="mini">
                <el-option label="水平" value="horizontal"/>
                <el-option label="垂直" value="vertical"/>
              </el-select>
            </el-form-item>
            <el-form-item label="距左侧">
               <el-input v-model="visualMapC.left" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="距右侧">
               <el-input v-model="visualMapC.right" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="距顶部">
               <el-input v-model="visualMapC.top" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="距底部">
               <el-input v-model="visualMapC.bottom" size="mini"></el-input>
            </el-form-item>
            <el-form-item  label="宽度">
                <el-input-number v-model="visualMapC.itemWidth" :min="0" size="mini"/>
            </el-form-item>
            <el-form-item  label="高度">
                <el-input-number v-model="visualMapC.itemHeight" :min="0" size="mini"/>
            </el-form-item>
            <el-form-item label="颠倒">
              <el-radio v-model="visualMapC.inverse" :label="true">是</el-radio>
              <el-radio v-model="visualMapC.inverse" :label="false">否</el-radio>
            </el-form-item>
            <el-divider content-position="center">值域</el-divider>
            <el-form-item  label="下限">
                <el-input-number v-model="visualMapC.min" :min="0" size="mini"/>
            </el-form-item>
            <el-form-item  label="上限">
                <el-input-number v-model="visualMapC.max" :min="0" size="mini"/>
            </el-form-item>
            <el-divider content-position="center">颜色映射</el-divider>
            <el-form-item  label="起始" >
              <el-color-picker v-model="visualMapC.inRange.color[0]" show-alpha size="small" @active-change="inRangeColor1"></el-color-picker>
            </el-form-item>
            <el-form-item  label="结束" >
              <el-color-picker v-model="visualMapC.inRange.color[1]" show-alpha size="small" @active-change="inRangeColor2"></el-color-picker>
            </el-form-item>
            <el-divider content-position="center">文本</el-divider>
            <el-form-item label="起始">
               <el-input v-model="visualMapC.text[0]" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="结束">
               <el-input v-model="visualMapC.text[1]" size="mini"></el-input>
            </el-form-item>
            <el-form-item  label="间距">
                <el-input-number v-model="visualMapC.textGap" :min="0" :max="40" size="mini"/>
            </el-form-item>
            <el-divider content-position="center"></el-divider>
            <el-form-item label="拖拽">
              <el-radio v-model="visualMapC.calculable" :label="true">是</el-radio>
              <el-radio v-model="visualMapC.calculable" :label="false">否</el-radio>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {
  data: function () {
    return {
    }
  },
  methods: {
    inRangeColor1 (val) {
      this.visualMapC.inRange.color.splice(0, 1, val)
    },
    inRangeColor2 (val) {
      this.visualMapC.inRange.color.splice(1, 1, val)
    }
  },
  computed: {
    visualMapC () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.$store.state.insideActiveArrayIndex].itemContent.detail.visualMapC
    }
  },
  watch: {
  },
  components: {
  }
}
</script>

<style scoped>
    .el-form-item {
        margin-bottom: 0px
    }
</style>
